<div id="PingmcContainer">
  <p>
    <b>配置此项目，可以让你正常监听到 Minecraft 服务端的运行状态与玩家人数。</b>
  </p>
  <p>数据每隔 10 秒刷新缓存。</p>
  <div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon3">服务器名称</span>
    <input type="text" class="form-control" placeholder="选填，默认是 Minecraft Server，推荐自己取名" aria-describedby="sizing-addon3" v-model="mcpingName" />
  </div>
  <div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon3">域名或IP地址</span>
    <input type="text" class="form-control" placeholder="选填，默认是 localhost，不推荐修改" aria-describedby="sizing-addon3" v-model="mcpingHost" />
  </div>
  <div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon3">服务端端口</span>
    <input type="text" class="form-control" placeholder="选填，为空则自动，取自 server.properties 文件" aria-describedby="sizing-addon3" v-model="mcpingPort" />
  </div>

  <div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon3">自定义 Motd</span>
    <input type="text" class="form-control" placeholder="选填，不填写则获取 motd" aria-describedby="sizing-addon3" v-model="mcpingMotd" />
  </div>

  <div class="PanelBody">
    <p><b>对外公开常用功能</b></p>
    <div class="PanelItem">
      <span class="glyphicon glyphicon-barcode" aria-hidden="true"> </span>
      <span v-on:click="toAPI_JSON()">格式 JSON | API 接口</span>
    </div>
    <!-- <div class="PanelItem">
            <span class="glyphicon glyphicon-picture" aria-hidden="true"> </span>
            <span v-on:click="toAPI_PAGE()">贴图系统 Beta</span>
        </div> -->
  </div>
  <p style="color: rgb(230, 55, 55)">保存或更新配置内容后，需要重启 Minecraft 服务器，才可使用。</p>
  <button class="btn btn-success" v-on:click="ok()">保存配置</button>
  &nbsp;|&nbsp;
  <button class="btn btn-danger" v-on:click="TOOLS.popWindClose();">返回</button>
</div>
<script>
  WS.sendMsg("mcping/config", PAGE.listenServername, function (obj) {
    var remoteMCPingConfig = obj.ResponseValue;
    new Vue({
      el: "#PingmcContainer",
      data: {
        mcpingName: remoteMCPingConfig.mcpingName || "",
        mcpingHost: remoteMCPingConfig.mcpingHost || "",
        mcpingPort: remoteMCPingConfig.mcpingPort || "",
        mcpingMotd: remoteMCPingConfig.mcpingMotd || ""
      },
      methods: {
        ok: function () {
          WS.sendMsg(
            "mcping/config_save",
            JSON.stringify({
              mcpingServerName: PAGE.listenServername,
              mcpingConfig: {
                mcpingName: this.mcpingName.trim() || "Minecraft Server",
                mcpingHost: this.mcpingHost.trim() || "localhost",
                mcpingPort: this.mcpingPort.trim() || "",
                mcpingMotd: this.mcpingMotd.trim() || ""
              }
            })
          );
          TOOLS.popWindClose();
        },
        toAPI_JSON: function () {
          window.open("/api/status/" + PAGE.listenServername);
        },
        toAPI_PAGE: function () {
          window.open("/api/status/" + PAGE.listenServername);
        }
      }
    });
  });
</script>
